<template>
    <div>
        <component :is="one"></component>

        <div id="container">
            <div id="content2">
                <table width="100%" height="41" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="15" height="18" align="left" valign="top">
                            <div align="left"></div>
                        </td>
                        <td width="385" align="left" valign="bottom" class="12">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="4" colspan="2" align="left" valign="bottom"></td>
                    </tr>
                    <tr>
                        <td height="15" align="left" valign="top">&nbsp;</td>
                        <td height="15" align="left" valign="top" class="12">
                            <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="20">
                                        <div class="right_proaducts">我的位置&gt;&gt;科技项目申报&gt;添加项目类别<br />
                                            <br />
                                        </div>
                                        <!--              <form action="showprojectCategorys.html" method="post" id="form" >-->
                                        <!-- <DIV class=padding>
                                            <DIV id=middlebody> -->
                                                <table cellspacing="0" cellpadding="0" width="100%" border="0">
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <div align="left">
                                                                    |&nbsp;&nbsp;欢迎,admin&nbsp;&nbsp;|&nbsp;&nbsp;
                                                                    <a class="table_t"
                                                                        href="#/">注销      </a>&nbsp;&nbsp;|&nbsp;&nbsp;
                                                                    <a
                                                                        href="javascript:history.go(-1)">后退</a>&nbsp;&nbsp;|
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div align="center"><a
                                                                        href="#/admin/showusers">登录用户管理</a>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div align="center"><a
                                                                        href="#/admin/showexperts">专家信息管理</a>
                                                                </div>
                                                            </td>
                                                            <td height="50">
                                                                <div align="center"><a
                                                                        href="#/admin/showunits">单位信息管理</a>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div align="center"><a
                                                                        href="#/admin/showprojectCategorys">项目管理</a>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table id="app" width="400" border="0" align="center" cellpadding="0"
                                                    cellspacing="1" class="mars">
                                                    <tbody>
                                                        <tr bgcolor="#fba661" height="30">
                                                            <td width="123" height="20" align="right" bgcolor="#f3f3f3">
                                                                项目类别名称</td>
                                                            <td width="11" align="right" bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td height="20" colspan="2" align="left" bgcolor="#f3f3f3">
                                                                <div align="left">
                                                                    <input type="text" id="temp1" name="categoryname"
                                                                        v-model="projectCategory.categoryname" />
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#e4f1fe">
                                                            <td height="20" bgcolor="#f3f3f3">
                                                                <div align="right">分配专家</div>
                                                            </td>
                                                            <td bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td height="20" colspan="2" align="left" bgcolor="#f3f3f3">
                                                                <div align="left">
                                                                    <select name="select2" size="1" @change="chang()"
                                                                        v-model="projectCategory.expertid">
                                                                        <option>1</option>
                                                                        <option>2</option>
                                                                        <option>3</option>
                                                                        <option>4</option>
                                                                        <option>5</option>
                                                                    </select>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#e4f1fe">
                                                            <td height="20" bgcolor="#f3f3f3">
                                                                <div align="right">项目申报开始时间</div>
                                                            </td>
                                                            <td bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td height="20" colspan="2" align="left" bgcolor="#f3f3f3">
                                                                <input type="text" name="repStartTime"
                                                                    v-model="projectCategory.repStartTime" />
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#e4f1fe">
                                                            <td height="20" bgcolor="#f3f3f3">
                                                                <div align="right"></div>
                                                            </td>
                                                            <td bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td height="20" colspan="2" align="left" bgcolor="#f3f3f3">
                                                                <span class="STYLE1" v-if="key">警告：结束时间不能小于当前系统时间</span>
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#e4f1fe">
                                                            <td height="20" bgcolor="#f3f3f3">
                                                                <div align="right">项目申报结束时间</div>
                                                            </td>
                                                            <td bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td height="20" colspan="2" align="left" bgcolor="#f3f3f3">
                                                                <input type="text" id="temp3" name="repStopTime"
                                                                    v-model="projectCategory.repStopTime" />
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#e4f1fe">
                                                            <td height="30" bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td bgcolor="#f3f3f3">&nbsp;</td>
                                                            <td width="73" height="30" align="left" bgcolor="#f3f3f3">
                                                                <!--                        <input type="submit" name="Submit3" value="提交" onclick="return checkAddProjectCategory(form);" />-->
                                                                <button @click="addProjectCategory()">提交</button>
                                                            </td>
                                                            <td width="188" height="30" align="left" bgcolor="#f3f3f3">
                                                                <input type="submit" name="Submit22" value="取消" /></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div></div>
                                                <!--              </form>-->
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <div class="table_wz"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <component :is="two"></component>
    </div>
</template>
<script>
    import four from '../../util/four';
    import aaa from '@/components/header.vue'
    import bbb from '@/components/footer.vue'
    export default {
        components: {
            aaa, bbb
        },
        data() {
            return {
                one: 'aaa',
                two: 'bbb',
                projectCategory: {
                    categoryname: "",
                    expertid: "",
                    repStartTime: "",
                    repStopTime: ""
                },
                key: 0,
            }
        },
        watch: {
            key() {
                if (this.projectCategory.repStartTime > new Date()) {
                    this.key = 0;
                } else {
                    this.key = 1;
                }
            }
        },

        methods: {
            chang() {
                console.log(this.projectCategory.expertName);
            },
            addProjectCategory() {
                four.post("/projectCategorys", this.projectCategory).then((res) => {
                    if (res.data.code == 20011) {
                        this.$message.success("添加成功！");
                    }
                    if (res.data.code == 20010) {
                        this.$message.error("添加失败！");
                    }
                }).finally(() => {
                    this.$router.push('/admin/showprojectCategorys');
                })
            }
        },
    }
</script>